<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇:新世界 - 炫酷宣传页</title>
    
    <!-- Bootstrap CSS -->
    <link href="./plugin/bootstrap-5.3.8-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="./plugin/bootstrap-icons-1.13.1/font/bootstrap-icons.css" rel="stylesheet">
    <!-- 自定义CSS -->
    <link href="./idnex-set/index.css" rel="stylesheet">
    
    <style>
        /* 炫酷动画效果 */
        .hero-section {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #16213e 75%, #1a1a2e 100%);
            position: relative;
            overflow: hidden;
        }
        
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%);
            animation: pulse 4s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.6; }
        }
        
        .snake-preview {
            position: relative;
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        .snake-animation {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            margin: -100px 0 0 -100px;
            border: 2px solid rgba(255,193,7,0.3);
            border-radius: 50%;
            animation: rotate 10s linear infinite;
        }
        
        .snake-animation::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            bottom: 20px;
            border: 2px solid rgba(255,193,7,0.2);
            border-radius: 50%;
            animation: rotate 8s linear infinite reverse;
        }
        
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 卡片渐变背景 */
        .bg-gradient-primary {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        }
        
        .bg-gradient-success {
            background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
        }
        
        .bg-gradient-info {
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        }
        
        .bg-gradient-danger {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        }
        
        /* 炫酷按钮效果 */
        .btn-glow {
            background: linear-gradient(45deg, #ff6b35, #f7931e);
            border: none;
            color: white;
            font-weight: bold;
            padding: 15px 30px;
            border-radius: 50px;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(255,107,53,0.4);
        }
        
        .btn-glow:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(255,107,53,0.6);
        }
        
        .btn-glow::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s;
        }
        
        .btn-glow:hover::before {
            left: 100%;
        }
        
        /* 卡片悬停效果 */
        .mode-card {
            transition: all 0.3s ease;
            border: 1px solid rgba(0,0,0,0.1);
        }
        
        .mode-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        /* 粒子背景效果 */
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        
        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: rgba(255,255,255,0.5);
            border-radius: 50%;
            animation: particle-float 6s linear infinite;
        }
        
        @keyframes particle-float {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
        }
        

    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-success sticky-top">
        <div class="container">
            <a class="navbar-brand fw-bold" href="#">
                <i class="bi bi-controller me-2"></i>
                贪吃蛇:新世界
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#home">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#modes">游戏模式</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">关于</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 首页英雄区域 -->
    <section id="home" class="hero-section">
        <div class="particles" id="particles"></div>
        <div class="container">
            <div class="row align-items-center min-vh-100">
                <div class="col-lg-6">
                    <h1 class="display-3 fw-bold text-white mb-4 animate__animated animate__fadeInDown">
                        <i class="bi bi-controller me-3"></i>贪吃蛇:新世界
                    </h1>
                    <p class="lead text-light mb-4 animate__animated animate__fadeInUp animate__delay-1s">
                        体验前所未有的贪吃蛇游戏！四种独特模式，无限乐趣等待你的挑战！
                    </p>
                    <div class="d-flex gap-3 animate__animated animate__fadeInUp animate__delay-2s">
                        <!-- 立即开始游戏按钮 - 跳转到游戏主页 -->
                        <a href="./pages/game-home.html" class="btn btn-glow btn-lg px-5">
                            <i class="bi bi-play-fill me-2"></i>立即开始游戏
                        </a>
                        <!-- 了解更多按钮 - 跳转到关于游戏部分 -->
                        <a href="#about" class="btn btn-outline-light btn-lg px-4">
                            <i class="bi bi-info-circle me-2"></i>了解更多
                        </a>
                    </div>
                    <div class="mt-4 animate__animated animate__fadeInUp animate__delay-3s">
                        <small class="text-light opacity-75">
                            <i class="bi bi-star-fill text-warning me-1"></i>
                            超过10,000+玩家正在体验
                        </small>
                    </div>
                </div>
                <div class="col-lg-6 text-center">
                    <div class="snake-preview">
                        <div class="snake-animation"></div>
                        <div class="position-relative">
                            <i class="bi bi-snake display-1 text-warning"></i>
                            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
                                <div class="bg-warning text-dark px-3 py-1 rounded-pill fw-bold">
                                    <i class="bi bi-lightning-fill me-1"></i>NEW
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 游戏模式介绍 -->
    <section id="modes" class="py-5 bg-dark text-white">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold mb-3 animate__animated animate__fadeInDown">
                    <i class="bi bi-stars text-warning me-3"></i>游戏模式
                </h2>
                <p class="lead text-light opacity-75 animate__animated animate__fadeInUp">四种独特模式，满足不同玩家的需求</p>
            </div>
            
            <div class="row g-4">
                <!-- 经典模式卡片 - 点击跳转到游戏主页 -->
                <div class="col-md-6 col-lg-3">
                    <a href="./pages/game-home.html" class="text-decoration-none">
                        <div class="card h-100 border-0 shadow-lg mode-card bg-gradient-primary">
                            <div class="card-body text-center p-4">
                                <div class="text-warning mb-3 animate__animated animate__pulse animate__infinite animate__slower">
                                    <i class="bi bi-dice-1 display-4"></i>
                                </div>
                                <h5 class="card-title fw-bold text-white">经典模式</h5>
                                <p class="card-text text-light opacity-75">传统的贪吃蛇玩法，重温经典回忆</p>
                                <div class="mt-3">
                                    <span class="badge bg-warning text-dark">🎯 怀旧体验</span>
                                    <span class="badge bg-light text-dark ms-1">⭐ 简单上手</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                
                <!-- 闯关模式卡片 - 点击跳转到游戏主页 -->
                <div class="col-md-6 col-lg-3">
                    <a href="./pages/game-home.html" class="text-decoration-none">
                        <div class="card h-100 border-0 shadow-lg mode-card bg-gradient-success">
                            <div class="card-body text-center p-4">
                                <div class="text-warning mb-3 animate__animated animate__pulse animate__infinite animate__slower">
                                    <i class="bi bi-dice-2 display-4"></i>
                                </div>
                                <h5 class="card-title fw-bold text-white">闯关模式</h5>
                                <p class="card-text text-light opacity-75">挑战不同关卡，体验进阶乐趣</p>
                                <div class="mt-3">
                                    <span class="badge bg-warning text-dark">🏆 多级挑战</span>
                                    <span class="badge bg-light text-dark ms-1">🚀 逐步提升</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                
                <!-- 对决模式卡片 - 点击跳转到游戏主页 -->
                <div class="col-md-6 col-lg-3">
                    <a href="./pages/game-home.html" class="text-decoration-none">
                        <div class="card h-100 border-0 shadow-lg mode-card bg-gradient-info">
                            <div class="card-body text-center p-4">
                                <div class="text-warning mb-3 animate__animated animate__pulse animate__infinite animate__slower">
                                    <i class="bi bi-dice-3 display-4"></i>
                                </div>
                                <h5 class="card-title fw-bold text-white">对决模式</h5>
                                <p class="card-text text-light opacity-75">与AI或其他玩家一决高下</p>
                                <div class="mt-3">
                                    <span class="badge bg-warning text-dark">⚔️ 智能AI</span>
                                    <span class="badge bg-light text-dark ms-1">👥 多人对战</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                
                <!-- BOSS战模式卡片 - 点击跳转到游戏主页 -->
                <div class="col-md-6 col-lg-3">
                    <a href="./pages/game-home.html" class="text-decoration-none">
                        <div class="card h-100 border-0 shadow-lg mode-card bg-gradient-danger">
                            <div class="card-body text-center p-4">
                                <div class="text-warning mb-3 animate__animated animate__pulse animate__infinite animate__slower">
                                    <i class="bi bi-dice-4 display-4"></i>
                                </div>
                                <h5 class="card-title fw-bold text-white">BOSS战模式</h5>
                                <p class="card-text text-light opacity-75">挑战强大的BOSS，展现你的实力</p>
                                <div class="mt-3">
                                    <span class="badge bg-warning text-dark">👹 强大BOSS</span>
                                    <span class="badge bg-light text-dark ms-1">💪 极限挑战</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            
            <!-- 底部大按钮 -->
            <div class="text-center mt-5 animate__animated animate__fadeInUp animate__delay-1s">
                <a href="./pages/game-home.html" class="btn btn-glow btn-lg px-5">
                    <i class="bi bi-rocket-takeoff me-2"></i>立即开始游戏冒险
                </a>
            </div>
        </div>
    </section>

    <!-- 操作说明 -->
    <section class="py-5 bg-white">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <h2 class="display-5 fw-bold text-success mb-4">操作方式</h2>
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="d-flex align-items-center">
                                <div class="key-icon bg-success text-white rounded me-3">W</div>
                                <span>向上移动</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="d-flex align-items-center">
                                <div class="key-icon bg-success text-white rounded me-3">S</div>
                                <span>向下移动</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="d-flex align-items-center">
                                <div class="key-icon bg-success text-white rounded me-3">A</div>
                                <span>向左移动</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="d-flex align-items-center">
                                <div class="key-icon bg-success text-white rounded me-3">D</div>
                                <span>向右移动</span>
                            </div>
                        </div>
                        <div class="col-12 mt-3">
                            <div class="d-flex align-items-center">
                                <div class="key-icon bg-warning text-white rounded me-3">空格</div>
                                <span>加速移动</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 text-center">
                    <i class="bi bi-keyboard display-1 text-muted"></i>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="py-5 bg-dark text-light">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center">
                    <h2 class="display-5 fw-bold mb-4">关于游戏</h2>
                    <p class="lead mb-4">
                        贪吃蛇:新世界是基于HTML5 Canvas技术开发的现代化网页游戏，
                        结合了经典玩法和创新元素，为玩家提供丰富多样的游戏体验。
                    </p>
                    <div class="row g-4 mt-4">
                        <div class="col-md-4">
                            <i class="bi bi-code-slash fs-1 text-warning mb-3"></i>
                            <h5>现代技术</h5>
                            <p class="small">使用最新的Web技术开发</p>
                        </div>
                        <div class="col-md-4">
                            <i class="bi bi-palette fs-1 text-warning mb-3"></i>
                            <h5>精美界面</h5>
                            <p class="small">响应式设计，支持多设备</p>
                        </div>
                        <div class="col-md-4">
                            <i class="bi bi-music-note-beamed fs-1 text-warning mb-3"></i>
                            <h5>丰富音效</h5>
                            <p class="small">沉浸式游戏体验</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 游戏特色 -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-success mb-3">
                    <i class="bi bi-stars me-3"></i>游戏特色
                </h2>
                <p class="lead text-muted">探索贪吃蛇游戏的无限可能</p>
            </div>
            
            <div class="row g-4">
                <div class="col-md-6 col-lg-3">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body text-center p-4">
                            <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                                <i class="bi bi-controller fs-2"></i>
                            </div>
                            <h5 class="card-title fw-bold">多模式选择</h5>
                            <p class="card-text text-muted">四种独特游戏模式，满足不同玩家的需求，从经典到创新应有尽有</p>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-3">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body text-center p-4">
                            <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                                <i class="bi bi-graph-up fs-2"></i>
                            </div>
                            <h5 class="card-title fw-bold">智能AI对手</h5>
                            <p class="card-text text-muted">先进的AI算法，提供具有挑战性的游戏体验，不断提升你的技能</p>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-3">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body text-center p-4">
                            <div class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                                <i class="bi bi-trophy fs-2"></i>
                            </div>
                            <h5 class="card-title fw-bold">成就系统</h5>
                            <p class="card-text text-muted">丰富的成就和排行榜系统，记录你的游戏历程，与好友一较高下</p>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-3">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body text-center p-4">
                            <div class="bg-warning text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                                <i class="bi bi-phone fs-2"></i>
                            </div>
                            <h5 class="card-title fw-bold">跨平台支持</h5>
                            <p class="card-text text-muted">完美适配各种设备，无论是电脑、平板还是手机，都能畅快游戏</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-5">
                <a href="./pages/game-home.html" class="btn btn-success btn-lg px-5">
                    <i class="bi bi-play-circle me-2"></i>立即体验所有特色
                </a>
            </div>
        </div>
    </section>

    <!-- 玩家评价 -->
    <section class="py-5 bg-white">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-dark mb-3">
                    <i class="bi bi-chat-quote me-3"></i>玩家评价
                </h2>
                <p class="lead text-muted">听听其他玩家怎么说</p>
            </div>
            
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body p-4">
                            <div class="d-flex align-items-center mb-3">
                                <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                                    <i class="bi bi-person fs-5"></i>
                                </div>
                                <div>
                                    <h6 class="mb-0 fw-bold">游戏达人</h6>
                                    <small class="text-muted">资深玩家</small>
                                </div>
                            </div>
                            <p class="card-text text-muted">"这是我玩过最有趣的贪吃蛇游戏！四种模式各有特色，特别是BOSS战模式，挑战性十足！"</p>
                            <div class="text-warning">
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body p-4">
                            <div class="d-flex align-items-center mb-3">
                                <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                                    <i class="bi bi-person fs-5"></i>
                                </div>
                                <div>
                                    <h6 class="mb-0 fw-bold">休闲玩家</h6>
                                    <small class="text-muted">上班族</small>
                                </div>
                            </div>
                            <p class="card-text text-muted">"工作间隙玩几局经典模式真的很解压！界面美观，操作流畅，是我手机里的必备游戏。"</p>
                            <div class="text-warning">
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-half"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body p-4">
                            <div class="d-flex align-items-center mb-3">
                                <div class="bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                                    <i class="bi bi-person fs-5"></i>
                                </div>
                                <div>
                                    <h6 class="mb-0 fw-bold">技术爱好者</h6>
                                    <small class="text-muted">程序员</small>
                                </div>
                            </div>
                            <p class="card-text text-muted">"AI对手的算法很厉害，每次对战都能学到新技巧。游戏的技术实现也很出色，响应速度很快！"</p>
                            <div class="text-warning">
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-success text-light py-4">
        <div class="container text-center">
            <p class="mb-0">&copy; 2024 贪吃蛇:新世界. 保留所有权利.</p>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="./plugin/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="./plugin/jquery-3.7.1.min.js"></script>
    <!-- 自定义JS -->
    <script src="./idnex-set/index.js"></script>
    
    <script>
        // 粒子效果
        function createParticles() {
            const particlesContainer = document.getElementById('particles');
            const particleCount = 50;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 6 + 's';
                particle.style.animationDuration = (Math.random() * 3 + 3) + 's';
                particlesContainer.appendChild(particle);
            }
        }
        

        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 创建粒子效果
            createParticles();
            

            
            // 添加滚动动画
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };
            
            const observer = new IntersectionObserver(function(entries) {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animate__animated', 'animate__fadeInUp');
                    }
                });
            }, observerOptions);
            
            // 观察所有卡片元素
            document.querySelectorAll('.mode-card').forEach(card => {
                observer.observe(card);
            });
            
            // 添加按钮点击效果
            document.querySelectorAll('.btn-glow').forEach(button => {
                button.addEventListener('click', function(e) {
                    // 创建点击波纹效果
                    const ripple = document.createElement('span');
                    const rect = this.getBoundingClientRect();
                    const size = Math.max(rect.width, rect.height);
                    const x = e.clientX - rect.left - size / 2;
                    const y = e.clientY - rect.top - size / 2;
                    
                    ripple.style.width = ripple.style.height = size + 'px';
                    ripple.style.left = x + 'px';
                    ripple.style.top = y + 'px';
                    ripple.classList.add('ripple');
                    
                    this.appendChild(ripple);
                    
                    setTimeout(() => {
                        ripple.remove();
                    }, 600);
                });
            });
            
            // 添加鼠标跟随效果
            document.addEventListener('mousemove', function(e) {
                const cursor = document.querySelector('.cursor');
                if (!cursor) {
                    const newCursor = document.createElement('div');
                    newCursor.className = 'cursor';
                    newCursor.style.cssText = `
                        position: fixed;
                        width: 20px;
                        height: 20px;
                        background: radial-gradient(circle, rgba(255,193,7,0.8) 0%, transparent 70%);
                        border-radius: 50%;
                        pointer-events: none;
                        z-index: 9999;
                        transition: transform 0.1s ease;
                    `;
                    document.body.appendChild(newCursor);
                }
                
                const cursorElement = document.querySelector('.cursor');
                cursorElement.style.left = e.clientX - 10 + 'px';
                cursorElement.style.top = e.clientY - 10 + 'px';
            });
            
            // 添加键盘快捷键
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    const startButton = document.querySelector('.btn-glow');
                    if (startButton) {
                        startButton.click();
                    }
                }
            });
        });
        
        // 添加波纹效果样式
        const style = document.createElement('style');
        style.textContent = `
            .ripple {
                position: absolute;
                border-radius: 50%;
                background: rgba(255,255,255,0.6);
                transform: scale(0);
                animation: ripple-animation 0.6s linear;
                pointer-events: none;
            }
            
            @keyframes ripple-animation {
                to {
                    transform: scale(4);
                    opacity: 0;
                }
            }
            
            .btn-glow {
                overflow: hidden;
                position: relative;
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>